<div class="po-slide-wrapper">
  <div class="po-slide-outer">
    <div class="po-slide-inner" #slide>
      @for (item of slideItems; track item; let index = $index) {
        <po-slide-item
          [p-action]="item.action"
          [p-data]="item"
          [p-image]="item.image"
          [p-image-height]="imageHeight"
          [p-template]="slideContentTemplate"
          [p-alt]="item.alt"
          [p-link]="item.link"
        >
        </po-slide-item>
      }
    </div>

    @if (!hideArrows && hasSlides && slides.length > 1) {
      <po-slide-control p-control="previous" (p-click)="previousControl()"> </po-slide-control>
    }

    @if (!hideArrows && hasSlides && slides.length > 1) {
      <po-slide-control p-control="next" (p-click)="nextControl()"> </po-slide-control>
    }
  </div>

  @if (hasSlides && slides.length > 1) {
    <po-slide-circles [p-current-slide-index]="currentSlideIndex" [p-items]="slideItems" (p-click)="goToItem($event)">
    </po-slide-circles>
  }
</div>
